<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <input type="button" value="按钮" id="btn">
  <div id="box"></div>

  <script src="common.js"></script>
  <script>
    var datas = ['西施', '貂蝉', '凤姐', '芙蓉姐姐'];
    // 点击按钮 动态创建列表，鼠标放上高亮显示
    my$('btn').onclick = function () {
      // 动态创建ul，内存中创建对象
      var ul = document.createElement('ul');
      // 把ul 放到页面上    把ul放到DOM树上，并且会重新绘制
      my$('box').appendChild(ul);

      for (var i = 0; i < datas.length; i++) {
        var data = datas[i];
        // 在内存中动态创建li
        var li = document.createElement('li');
        // 把li添加到DOM树，并且会重新绘制
        ul.appendChild(li);
        // 设置li中显示的内容
        // li.innerText = data;
        setInnerText(li, data);

        // 给li注册事件
        li.onmouseover = liMouseOver;
        li.onmouseout = liMouseOut;
      }
    }
    // 当鼠标经过li的时候执行
    function liMouseOver() {
      // 鼠标经过高亮显示
      this.style.backgroundColor = 'red';
    }

    function liMouseOut() {
      // 鼠标离开取消高亮显示
      this.style.backgroundColor = '';
    }

    // 设置标签之间的内容
    // function setInnerText(element, content) {
    //   // 判断当前浏览器是否支持 innerText
    //   if (typeof element.innerText === 'string') {
    //     element.innerText = content;
    //   } else {
    //     element.textContent = content;
    //   }
    // }


    
  </script>
</body>
</html>
